<template>
	<view class="team">
		<view class="team_ul">
			<view class="team_li">
				<view class="on" @click="pickerShowOneClick">
					<text class="one">{{columnsId==0?'有货':'无货'}}</text>
					<text class="two iconfont icon-xiangxia1"></text>
				</view>
			</view>
		</view>

		<!-- 司机弹出框 -->
		<u-picker :show="pickerShowOne" :columns="columnsAll" :defaultIndex="defaultIndexOne" @cancel="pickerShowOne=false" closeOnClickOverlay keyName="name"
			@confirm="confirmOne"
			@close="pickerShowOne=false"></u-picker>
		<!-- 司机弹出框 -->
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	const props = defineProps({
		columnsAll:Array,
		columnsId:Number,//单独的司机名字
		orderId:Number,//单独的订单id
	})
	
	const pickerShowOne = ref(false);
	const defaultIndexOne = ref([0]);
	const emit = defineEmits(['teamClick']);
	
	//弹出确定
	function confirmOne(e){
		console.log(e,'查看')
		emit('teamClick',e.value[0].id);
		pickerShowOne.value=false;
	}
	
	//打开弹窗
	function pickerShowOneClick(){
		let nums=props.columnsAll[0].findIndex((t)=>t.id==props.columnsId);
		defaultIndexOne.value=[nums];
		pickerShowOne.value=true;
	}
	
</script>

<style lang="scss" scoped>
.team{
	height:80rpx;
	padding:0 30rpx;
	display: flex;
	flex-direction:row;
	justify-content: space-between;
	align-items: center;
	.team_ul{
		flex: auto;
		display: flex;
		flex-direction: row;
		width: 100%;
		.team_li{
			// flex: 0 0 50%;
			flex:1;
			display: flex;
			align-items: center;
			overflow: hidden;
			.on{
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				.one{
					font-size: 30rpx;
					color: #000;
					overflow: hidden;//溢出隐藏
					white-space: nowrap;//禁止换行
					text-overflow: ellipsis;//...
					flex: auto;
					font-weight: 700;
				}
				.two{
					font-size: 28rpx;
					color: #000;
					width: 30rpx;
					margin-left: 10rpx;
					flex: none;
				}
			}
			.in{
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				margin-left: 30rpx;
				.one{
					font-size: 30rpx;
					color: #000;
					overflow: hidden;//溢出隐藏
					white-space: nowrap;//禁止换行
					text-overflow: ellipsis;//...
					flex: auto;
				}
				.two{
					font-size: 28rpx;
					color: #000;
					width: 30rpx;
					margin-left: 10rpx;
					flex: none;
				}
			}
			
		}
		.team_li.qx{
			font-size: 30rpx;
			color: #999;
		}
	}
	.team_btn{
		flex: none;
		width: 100rpx;
		background: #16BB5D;
		padding:12rpx 20rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #fff;
	}
}
</style>
